<template>
    <view>
        <view class="header align-center justify-between">
            <view class="title">中山万民汇店</view>
            <view class="shou">
                <uni-icons type="star" size="20" color="#9B9898"></uni-icons>
                <view class="text">收藏门店</view>
            </view>
        </view>
        <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#B39272">
            <swiper-item>
                <image src="@/static/temp/banner5.png" mode="aspectFill"></image>
            </swiper-item>
            <swiper-item>
                <image src="@/static/temp/banner5.png" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
        <view class="content">
            <view class="row align-center">
                <text>地址：中山市港口镇万民汇商场网红街28-29卡</text>
                <view class="icon">
                    <image src="@/static/icon/loc.png" mode="scaleToFill"></image>
                </view>
            </view>
            <view class="row align-center">
                <text>电话：19928019611</text>
                <view class="icon">
                    <image src="@/static/icon/tel.png" mode="scaleToFill"></image>
                </view>
            </view>
            <view class="row align-center">
                <text>门店营业时间：周一至周日08：30-22:30</text>
              
            </view>
        </view>
        <view class="map">
            
        </view>
        <view class="btn">
            一键导航
        </view>
    </view>
</template>

<script>
</script>

<style lang="scss">
    @import '../common/common.scss';
    page{
        background-color: #fff;
        .header{
            padding: 30rpx;
            .title{
                font-size: 42rpx;
                font-weight: normal;
            }
            .shou{
                text-align: center;
                font-size: 24rpx;
                color: #9B9898;
                .text{
                    line-height: 24rpx;
                }
            }
        }
        .banner{
            width: 750rpx;
            height: 270rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .content{
            margin-top: 80rpx;
            padding: 0 30rpx;
            .row{
                line-height: 80rpx;
                color: #6A6666;
                font-size: 25rpx;
                .icon{
                    width: 41rpx;
                    height: 41rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 4rpx solid #ADA1A1;
                    border-radius: 50%;
                    margin-left: 10rpx;
                    image{
                        width: 20rpx;
                        height: 20rpx;
                    }
                }
            }
        }
        .map{
            width: 684rpx;
            height: 241rpx;
            margin: 0 auto;
            margin-top: 80rpx;
            background-color: #ccc;
        }
        .btn{
            width: 676rpx;
            height: 99rpx;
            text-align: center;
            line-height: 99rpx;
            background: linear-gradient(90deg, #444752, #565A66, #434652);
            border-radius: 10rpx;
            margin: 0 auto;
            margin-top: 80rpx;
            color: #fff;
            font-size: 33rpx;
            letter-spacing: 2rpx;
        }
    }
</style>